<script setup>
import {getEntityPropertyConfigList, generateEntityCode, synchronizationData} from "@/api/EntityPropertyConfigApi.js";
import {getDatabaseConfigList} from "@/api/DatabaseConfigApi.js";
import {onMounted, ref} from "vue";
import {getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance();
import TipUtil from "@/utils/message.js";

onMounted(() => {
  searchList();
});

const searchList = () => {
  getEntityPropertyConfigList({
    searchParam: result.value.searchParam
  }).then(res => {
    result.value.originData = res.data;
  });
}
const getChangeData = () => {
  requestBody.value.propertyList = result.value.selectedData;
  if (!requestBody.value.propertyList || requestBody.value.propertyList.length === 0) {
    result.value.generateCode = "";
    return
  }
  generateEntityCode(requestBody.value).then(res => {
    result.value.generateCode = res.data;
  });
}
const resetCheckBox = () => {
  result.value.selectedData = [];
  getChangeData();
  searchList();
}
const handleSynchronizationData = () => {
  const item = window.localStorage.getItem("generateEntityConfig");
  let dsName;
  if (item) {
    dsName = JSON.parse(item).dsName;
  }
  synchronizationData(dsName).then(res => {
    searchList();
    TipUtil.success(res.message);
    setTimeout(() => {
      searchList();
    }, 3000);
  });
}
const copyCode = (event) => {
  proxy.$clipboard.copyContent(event.target, result.value.generateCode);
}

// 定义参数
const result = ref({
  originData: [],
  selectedData: [],
  searchParam: "",
  generateCode: ""
});
const requestBody = ref({
  className: "",
  packageName: "",
  javadoc: "",
  useLombok: true,
  propertyList: []
});
const dialog = ref({
  visible: false,
  title: "",
  form: {
    dsName: "",
    className: "",
    packageName: "",
    javadoc: [],
    useLombok: true
  },
  dbConfigData: []
});
const openConfig = () => {
  dialog.value.visible = true;
  // 查询数据源
  getDatabaseConfigList().then(res => {
    dialog.value.dbConfigData = res.data;
    const item = window.localStorage.getItem("generateEntityConfig");
    if (item) {
      dialog.value.form = JSON.parse(item);
    }
  });
}

const confirmForm = () => {
  dialog.value.visible = false;
  TipUtil.success("配置成功");
  window.localStorage.setItem("generateEntityConfig", JSON.stringify(dialog.value.form))
}
</script>

<template>
  <el-row>
    <el-col :span="12" class="left-bg">
      <div class="common-bg-toolkit">
        <span>
          <el-input
              v-model="result.searchParam"
              placeholder="输入查询参数"
              clearable
              style="width: 50%;"
              @input="searchList"
          />
        </span>
        <span style="margin-left: 10px">
          <el-button size="small" type="info" color="#626aef" @click="handleSynchronizationData">同步数据</el-button>
          <el-button size="small" type="info" color="#626aef" @click="resetCheckBox">重置勾选</el-button>
          <el-button size="small" type="info" color="#626aef" @click="openConfig">配置</el-button>
        </span>
      </div>
      <div class="left-bg-form">
        <el-form :model="result" label-width="auto">
          <el-form-item>
            <el-checkbox-group v-model="result.selectedData" @change="getChangeData">
              <el-row>
                <template v-for="item in result.originData" :key="item">
                  <el-col :span="12">
                    <el-checkbox :key="item" :value="item" :name="item.remark">
                      <span :title="item.remark">{{ item.remark }}</span>
                    </el-checkbox>
                  </el-col>
                </template>
              </el-row>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="12" class="right-bg">
      <div class="common-bg-toolkit">
        <span style="margin-left: 10px">
          <el-button @click="copyCode" size="small" type="info" color="#626aef">复制代码</el-button>
        </span>
      </div>
      <div class="code-view">
        <highlightjs language="java" :code="result.generateCode"></highlightjs>
      </div>
    </el-col>
  </el-row>

  <el-dialog v-model="dialog.visible" :title="dialog.title" width="500" :close-on-click-modal="false">
    <el-form ref="dbConfigForm" :model="dialog.form">
      <el-form-item label="数据源" :label-width="120">
        <el-select v-model="dialog.form.dsName" placeholder="请选择数据库类型">
          <el-option v-for="(item, index) in dialog.dbConfigData" :key="index" :value="item.name" :label="item.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="类名称" :label-width="120">
        <el-input v-model="dialog.form.className" autocomplete="off" placeholder="请输入类名称"/>
      </el-form-item>
      <el-form-item label="包路径" :label-width="120">
        <el-input v-model="dialog.form.packageName" autocomplete="off" placeholder="请输入包路径"/>
      </el-form-item>
      <el-form-item label="类注释" :label-width="120">
        <el-input v-model="dialog.form.javadoc" type="textarea" autocomplete="off" placeholder="请输入类注释"/>
      </el-form-item>
      <el-form-item label="使用lombok" :label-width="120">
        <el-switch v-model="dialog.form.useLombok"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="confirmForm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-row {
  height: 100vh;
}

.left-bg {
  background-color: rgb(236, 245, 255);
  height: 100%;
  text-align: left;

  .left-bg-form {
    padding: 0 10px;
    height: calc(100% - 50px);
    overflow-y: auto;
  }
}

.common-bg-toolkit {
  background-color: rgb(20, 136, 245, .3);
  line-height: 45px;
  padding: 0 10px;
  height: 50px;
}

.code-view {
  padding: 0 10px;
  height: calc(100% - 50px);
  overflow-y: auto;
}

.right-bg {
  background-color: rgba(95, 158, 160, .2);
  text-align: left;
  height: 100%;
  overflow-y: auto;
}
</style>